<template>
  <a-modal
    title="发票"
    width="45%"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    destroyOnClose
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          label="发票号"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input

            v-decorator="['invoiceNum',
                          {

                            rules: [{required: true, message: '请输入发票号'}],
                            initialValue: invoiceNum
                          }]"
          />
        </a-form-item>
        <a-form-item
          label="发票图片"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <div
            class="addbillimgbox"
            v-if="form.getFieldValue('invoiceImage') || invoiceImage">
            <!-- <a
              @click="imageUrlPrefix +form.getFieldValue('invoiceImage')"
            >{{ form.getFieldValue('invoiceImage') }}</a> -->
            <img
              class="addbillimg"
              v-if="form.getFieldValue('invoiceImage')"
              :src="imageUrlPrefix + form.getFieldValue('invoiceImage')"
              alt="">
            <img
              class="addbillimg"
              v-else
              :src="imageUrlPrefix + invoiceImage"
              alt="">
            <span class="addclose">
              &nbsp;
              <a-icon
                type="close"
                @click="removeFile"/>
            </span>
          </div>
          <!-- <div class="addbillimgbox" v-else-if="invoiceImage && !form.getFieldValue('invoiceImage')">
            <img class="addbillimg" :src="imageUrlPrefix + invoiceImage" alt="">
            <span class="addclose">
              &nbsp;
              <a-icon type="close" @click="removeFile"/>
            </span>
          </div> -->
          <a-upload
            name="mediaFile"
            :showUploadList="false"
            :before-upload="beforeUploadFile">
            <a-button :loading="uploadLoading">
              <a-icon type="upload"/>添加发票图片
            </a-button>
          </a-upload>

          <a-input
            hidden
            v-decorator="[
              'invoiceImage',
              {rules: [{ required: false, message: '请上传合同扫描件' }],
               initialValue: invoiceImage
              }
            ]"
          />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
import { addInvoiceNum, uploadProjectFile } from '@/api/manage'
import config from '@/config/defaultSettings'
export default {
  name: 'EditMail',

  data() {
    return {
      invoiceNum:'',
      invoiceImage:'',
      form: this.$form.createForm(this),
      imageUrlPrefix: config.uploadedUrlPrefix,
      defaultFileList: [],
      uploadLoading: false,
      mailAddrs: {},
      type: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      },
      visible: false,
      confirmLoading: false,
      timer: null,
      time: 90,
      isNewPhoneModal: true
    }
  },
  created() {
  },
  methods: {
    //修改发票
    reviseInvio(o={}){
      this.defaultForm = o
    },
    //上传发票图片
    beforeUploadFile(file) {
      // const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      console.log(file,1)
      this.file = file
      this.defaultFileList.push(file)
      // if (!isJpgOrPng) {
      //   this.$message.error('只能上传JPG或PNG图片！')
      // }
      // const isLt2M = file.size / 1024 / 1024 < 10
      // if (!isLt2M) {
      //   this.$message.error('图片需小于10M')
      // }
      // if (isJpgOrPng && isLt2M) {
      //   this.handleFileUpload('projectAttachment')
      // }
      this.handleFileUpload('invoiceImage')
      console.log(invoiceImage)
      return false
    },
    handleFileUpload(fieldName) {
      const formData = new FormData()
      formData.append('mediaFile', this.file)
      this.uploadLoading = true
      uploadProjectFile(formData)
        .then(res => {
          const filename = res.resData && res.resData.result
          this.form.setFieldsValue({
            [fieldName]: filename
          })
        })
        .catch(() => {
          this.defaultFileList = []
          this.$message.error('上传失败，请重试')
        })
        .finally(() => {
          this.uploadLoading = false
        })
    },
    removeFile() {
      this.defaultFileList = []
      this.invoiceImage = ''
      this.form.resetFields('invoiceImage')
    },

    show(record) {
      console.log(record)
      this.invoiceImage = record.invoiceImage?record.invoiceImage:''
      this.invoiceNum = record.invoiceNum?record.invoiceNum:''
      this.mailAddrs = record.batchId
      this.visible = true
    },

    handleCancel() {
      this.visible = false
    },
    handleSubmit() {
      this.form.validateFields((err, value) => {
        if (!err) {
          console.log(value,1)

          addInvoiceNum(this.mailAddrs, value).then(res => {
            console.log(res)
            this.handleCancel()
            this.$emit('onSuccess')
            // this.$refs.table.refresh(true)
            // setTimeout(() => {
            //     window.location.reload()
            //   }, 50)
          })
        }
      })
    }
  }
}
</script>

<style>
.addbillimgbox{
  position: relative;
}
 .addbillimg{
   width: 100%;
 }
 .addclose{
   position: absolute;
   right: 0;
   top: -10px;
 }
</style>
